import React, { useEffect, useState } from 'react';
import {
  View,
  Image,
  Text
} from '@tarojs/components';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import {
  queryUserInfo,
  postUserInvitations
} from '@/api';
import NavBar from '@/components/NavBar';
import './index.scss';

const Mine = () => {
  const [titleBarHeight, setTitleBarHeight] = useState(0);
  const [userInfo, setUserInfo] = useState({});

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        let height = res.titleBarHeight + res.statusBarHeight
        setTitleBarHeight(height)
      }
    });
    onLoadData();
  }, [])

  useShareAppMessage((res)=>{
    if (res.from == 'button') {
      onPostInvitations();
      return {
        title: '快来围观我的写真吧',
        path: '/pages/index/index',
        imageUrl: 'https://jala-test-images.sndaurl.cn/images/share_img.png'
      }
    }
  })

  const onPostInvitations = async()=>{
    await postUserInvitations();
    onLoadData();
  }

  const doBack = () => {

  }

  const onShowDetail = (url) => {
    Taro.navigateTo({
      url: url
    })
  }

  const onLoadData = () => {
    queryUserInfo({})
      .then(res=>{
        setUserInfo(res);
      })
  }

  const onCopy = () => {
    Taro.setClipboardData({
      data: `${userInfo.id}`
    });
  }

  return (
    <View className='mine_container'>
      {/* <NavBar
        title="个人中心"
        onClick={()=>{doBack()}}
      /> */}
      <View
        className='mine_section'
        style={{
          paddingTop: `${titleBarHeight}px`
        }}
      >
        <View className='mine_view' >
          <View className='mine_view_info'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/headSculptur.png'
              className='mine_view_info_logo'
              mode='aspectFill'
            />
            <View className='mine_view_info_detail'>
              <View className='mine_view_info_detail_name'>你本来就很美</View>
              <View className='mine_view_info_detail_id' onClick={()=>{onCopy()}}>
                ID：{userInfo.id}
                <Image
                  src='https://jala-test-images.sndaurl.cn/images/copy.png'
                  className='mine_view_info_detail_id_icon'
                />
              </View>
            </View>
          </View>
          <View
            className='mine_view_limit'
            onClick={()=>{Taro.navigateTo({url: '/pages/subpages/task/index'})}}
          >
            <View className='mine_view_limit_name'>
              剩余变妆<Text className='mine_view_limit_name_num'>{userInfo?.num || '-'}</Text>次
            </View>
            <View className='mine_view_limit_desc'>点击“获取机会”，赢取更多变妆次数</View>
            <View className='mine_view_limit_action'>获取机会</View>
          </View>
          <View className='mine_view_action' onClick={()=>{onShowDetail('/pages/subpages/faceprofile/index')}}>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/facialProfile.png'
              className='mine_view_action_icon'
              mode='aspectFill'
            />
            我的脸部档案
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrow.png'
              className='mine_view_action_right'
              mode='aspectFill'
            />
          </View>
          <View className='mine_view_action' onClick={()=>{onShowDetail('/pages/subpages/protocol/index')}}>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/agreement.png'
              className='mine_view_action_icon'
              mode='aspectFill'
            />
            协议与说明
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrow.png'
              className='mine_view_action_right'
              mode='aspectFill'
            />
          </View>
          <View className='mine_view_logo'>
            {/* <Image
              src='https://jala-test-images.sndaurl.cn/images/mini_logo.png'
              className='mine_view_logo_img'
              mode='aspectFill'
            /> */}
            <View className='mine_view_logo_text'>笔墨AI提供技术支持</View>
          </View>
        </View>
      </View>
    </View>
  )
}
export default Mine;
